<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>暑假安全</title>
    <style type="text/css">
        /*@charset "utf-8";*/
        body,input,button,select,textarea,table{font-family:"Microsoft YaHei", "微软雅黑", "SimSun", "宋体";color: #000;}
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}
        fieldset,img {border:0;}
        table{border-collapse:collapse;border-spacing:0;}
        ol,ul{list-style:none;}
        input,button,select,textarea{outline:none;}
        a{color: #272822;}
        span{display: inline-block;}
        a:link, a:visited,a:hover, a:active {text-decoration: none;}
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
        audio,canvas,video {display:inline-block;*display:inline;*zoom:1;}
        span{display: inline-block}
        .lf{float:left;}
        .rt{float:right;}
        .clear:after {visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
        .clear{zoom:1;}

        html { margin: 0 auto; -webkit-tap-highlight-color: transparent; }
        .main { margin: 0 auto; padding: 1.09375rem 0.9635416667rem; }
        .main .headTitle { text-align: center; }
        .main .headTitle span { width: 1.171875rem; height: 1.171875rem; background: url("img/TIG.png") center no-repeat; background-size: cover; color: #e71f29; font-size: 0.9375rem; }
        .main .content { margin: 0.390625rem 0; }
        .main .content .model { margin-bottom: 0.6510416667rem; }
        .main .content .model .imgview { position: relative; }
        .main .content .model .imgview img { display: block; }
        .main .content .model .imgview img:nth-of-type(1) { width: 6.5104166667rem; margin: 0 auto; }
        .main .content .model .imgview img:nth-of-type(2) { position: absolute; width: 0.9765625rem; bottom: 0.390625rem; }
        .main .content .model .text { margin-top: 0.6510416667rem; }
        .main .content .model .text h3 { font-size: 0.3125rem; margin-bottom: 0.3255208333rem; }
        .main .content .model .text p { font-size: 0.2604166667rem; line-height: 0.5208333333rem; }
        .main .content .model:nth-of-type(2) img:nth-of-type(2) { bottom: 1.3020833333rem; right: 0; }
        .main .content .model:nth-of-type(3) img:nth-of-type(1) { width: 4.5572916667rem; }
        .main .content .model:nth-of-type(3) img:nth-of-type(2) { bottom: 3.2552083333rem; }
        .main .content .model:nth-of-type(4) img:nth-of-type(2) { right: 0; bottom: 2.8645833333rem; }
        .main .content .model:nth-of-type(5) img:nth-of-type(1) { width: 5.9895833333rem; }
        .main .content .model:nth-of-type(5) img:nth-of-type(2) { bottom: 2.4739583333rem; }
        .main #btn { margin: 0.78125rem auto 0 auto; text-align: center; background: url("img/button.png") center no-repeat; background-size: cover; width: 2.8385416667rem; height: 0.7291666667rem; color: #fff; font-size: 0.3125rem; line-height: 0.625rem; }
        .main #btn:active { background: url("img/button_press.png") center no-repeat; background-size: cover; }
    </style>
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize',changeRem);
        function changeRem() {
            var oWidth = window.innerWidth;
            oWidth = oWidth <= 1024 ? oWidth : 1024;
            html.style.maxWidth = oWidth + 'px';
            html.style.fontSize = oWidth/10+ 'px';
        }
    </script>
</head>
<body>
    <div class="main">
        <div class="headTitle">
            <span>安</span>
            <span>全</span>
            <span>小</span>
            <span>常</span>
            <span>识</span>
        </div>
        <div class="content">
            <div class="model">
                <div class="imgview">
                    <img src="img/write.png" alt="">
                    <img src="img/write_2.png" alt="">
                </div>
                <div class="text">
                    <h3>预防溺水，六不要！</h3>
                    <p>1、不在无家长（或监护人）带领下私自外出游泳或戏水；</p>
                    <p>2、不擅自（未经家长许可）与同学结伴游泳或戏水；</p>
                    <p>3、不到不熟悉的水域游泳或戏水；</p>
                    <p>4、不到无安全保障的水域游泳或戏水；</p>
                    <p>5、不到无人监管和有禁止游泳告示的江河、溪流、山塘、水库、不明水坑边玩耍戏水；</p>
                    <p>6、在见到有人落水而自己又无能力救护的情况下，不要惧怕逃离或者冒然下水施救，要采取呼救及报警等措施。</p>
                </div>
            </div>
            <div class="model">
                <div class="imgview">
                    <img src="img/electricity.png" alt="">
                    <img src="img/electricity_2.png" alt="">
                </div>
                <div class="text">
                    <h3>预防触电，八项知识！</h3>
                    <p>1、认识了解电源总开关，学会在紧急情况下关掉总电源；</p>
                    <p>2、电器使用完毕及时拔掉电源插头；</p>
                    <p>3、发现有人触电要及时关掉电源，不要直接用手去救人；</p>
                    <p>4、不用手或导电物（如金属制品）去接触电源插座；</p>
                    <p>5、不用湿手触摸电器，不用湿布擦拭电器；</p>
                    <p>6、不随意拆卸、安装电源线路、插座、插头等；</p>
                    <p>7、雷雨天气，在家中注意关好门窗，切断电器电源，远离带电设备；</p>
                    <p>8、雷雨天气，在室外应及时寻找避雷场所，不要停留树下或高塔下躲雨，不要赤脚站在地上或水泥地上；</p>
                </div>
            </div>
            <div class="model">
                <div class="imgview">
                    <img src="img/fire.png" alt="">
                    <img src="img/fire_2.png" alt="">
                </div>
                <div class="text">
                    <h3>预防火灾，五注意！</h3>
                    <p>1、自觉维护公共消防安全，发现火灾迅速拨打119电话报警；</p>
                    <p>2、不携带易燃易爆危险品进入公共场所、乘坐公共交通工具；</p>
                    <p>3、正确使用电器设备，不超负荷用电，外出时要关闭电源开关；</p>
                    <p>4、遇到火灾时沉着、冷静，迅速正确逃生，不贪恋财物、不乘坐电梯；</p>
                    <p>5、必须穿过浓烟逃生时，尽量用浸湿的衣物保护头部、捂住口鼻，弯腰前行；</p>
                </div>
            </div>
            <div class="model">
                <div class="imgview">
                    <img src="img/road.png" alt="">
                    <img src="img/road_2.png" alt="">
                </div>
                <div class="text">
                    <h3>交通安全常识，八不准！</h3>
                    <p>1、行人须在人行道内行走，没有人行道的要靠路边行走； </p>
                    <p>2、行人不准在车行道 上追逐、猛跑，不准在车辆临近时突然猛拐横穿； </p>
                    <p>3、不准在道 路上扒车、追车，不准强行拦车或抛物击车； </p>
                    <p>4、不准在公路上玩耍、嬉闹； </p>
                    <p>5、不准双手离把，不准攀扶其他车辆或手中持物； </p>
                    <p>6、不准车辆并行、互相追逐或曲折竞驶； </p>
                    <p>7、不准撑伞骑车，不准骑车带人； </p>
                    <p>8、尽量不要骑电瓶车，若一定要骑，必须佩戴安全头盔；</p>
                </div>
            </div>
            <div class="model">
                <div class="imgview">
                    <img src="img/internet.png" alt="">
                    <img src="img/internet_2.png" alt="">
                </div>
                <div class="text">
                    <h3>网络安全常识，六项知识！</h3>
                    <p>1、网络交友要警惕，注意区分网络与现实的区别，避免过分沉迷于网络； </p>
                    <p>2、不要在不信任的网站上留下任何个人真实信息（包括姓名、年龄、住址以及就读学校、班级等）,或透露给其他网友； </p>
                    <p>3、在网络活动中应守法自律，不要受不良言论和信息的误导，不要参与有害和无用信息的制作和传播； </p>
                    <p>4、在不了解对方的情况下应尽量避免和网友直接会面或参与各种联谊活动，以免被不法分子有机可乘，危及自身安全； </p>
                    <p>5、应在家长的帮助和指导下进行网络购物或交易，核实商品信息或交易情况，不轻易向对方付款或提供银行卡密码，警惕网络诈骗； </p>
                    <p>6、家长应对学生上网情况多加关心、指导和监督，并适当控制学生上网时间，避免长时间上网引起的各类病症发生； </p>
                </div>
            </div>
        </div>
        <div id="btn">我记住了</div>
    </div>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function () {
            var fileObj = new FormData();
                fileObj.append('userId', getQuery('userId'));
            var http = new XMLHttpRequest();
            var url  = '/survey/welfare/saveSummerSafe';
            http.open("POST", url, true);
            http.onreadystatechange = function () {
                if (http.readyState === 4) {
                    try {
                        //关闭webView
                        LauncherJs.finish();
                    }
                    catch (e) {}
                }
            };
            http.send(fileObj);
        };
        function getQuery (name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null) return unescape(r[2]); return null;
        }
    </script>
</body>
</html>